<a class="logo" routerLink="/home">
  <img alt="StartOS" src="assets/img/icon.png" />
</a>
<ion-item-group class="menu">
  <ion-menu-toggle *ngFor="let page of pages" auto-hide="false">
    <ion-item
      button
      class="link"
      routerLinkActive="link_selected"
      color="transparent"
      routerDirection="root"
      lines="none"
      detail="false"
      [routerLink]="page.url"
    >
      <ion-icon
        slot="start"
        class="icon label"
        routerLinkActive="label_selected"
        [name]="page.icon"
      ></ion-icon>
      <ion-label class="label montserrat" routerLinkActive="label_selected">
        {{ page.title }}
      </ion-label>
      <ion-icon
        *ngIf="page.url === '/system' && (warning$ | async)"
        color="warning"
        size="small"
        name="warning"
      ></ion-icon>
      <ion-icon
        *ngIf="page.url === '/system' && (showEOSUpdate$ | async)"
        color="success"
        size="small"
        name="rocket"
      ></ion-icon>
      <ion-badge
        *ngIf="page.url === '/updates' && (updateCount$ | async) as updateCount"
        color="success"
      >
        {{ updateCount }}
      </ion-badge>
      <ion-badge
        *ngIf="
          page.url === '/notifications' &&
          (notificationCount$ | async) as notificaitonCount
        "
        color="danger"
      >
        {{ notificaitonCount }}
      </ion-badge>
    </ion-item>
  </ion-menu-toggle>
</ion-item-group>
<img
  appSnek
  class="snek"
  alt="Play Snek"
  src="assets/img/icons/snek.png"
  [appSnekHighScore]="snekScore$ | async"
/>
<ion-footer *ngIf="sidebarOpen$ | async" class="bottom">
  <connection-bar></connection-bar>
</ion-footer>
